<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="小区名称">
                        <div class="filters-input">
                            <el-select v-model="filters.houseId" placeholder="请选择小区" :clearable="true">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="通行人员名字">
                        <div class="filters-input">
                            <Input v-model="filters.userName" placeholder="通行人员名字"/>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('form1')">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>

            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="userName" label="通行图像">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgUrl" min-width="120" height="120">
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="通行人员名字"></el-table-column>
                <el-table-column prop="houseName" label="小区名称"></el-table-column>
                <el-table-column prop="address" label="住址"></el-table-column>
                <el-table-column prop="dtuAdress" label="门禁位置"></el-table-column>
                <el-table-column prop="openResult" label="开门结果">
                    <template slot-scope="scope">
                        <p v-if="scope.row.openResult == 1" style="color:green">成功</p>
                        <p v-if="scope.row.openResult == 0" style="color:red">失败</p>
                    </template>
                </el-table-column>
                <el-table-column prop="openTime" label="开门时间"></el-table-column>
                <el-table-column label="开门类型">
                    <template slot-scope="scope">
                        <p v-if="scope.row.type == 1" style="color:green">DTU</p>
                        <p v-if="scope.row.type == 2" style="color:red">人脸机</p>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
    </div>
</template>


<script>
    import baseURL from '_conf/url'
    import QRCode from 'qrcodejs2'
    import Treeselect from "@riophae/vue-treeselect";

    //加载数据
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        console.log(params);
        //与后台交换数据
        this.postRequest("/api/doorRecord/loadData", params).then(res => {
            console.log(res);
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //查询
    let handleQuery = function (name) {
        this.filters.pageNum = 1;
        this.loadData();
    };
    export default {
        name: "userList",
        components: {
            Treeselect
        },
        data() {
            return {
                houseId: null,
                houseList: [],//小区
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //表格数据
                tableData: [],
                //数据表格隐藏那个状态
                tableLoading: false,
            };
        },
        created: function () {
            this.gethouse();
            this.loadData();
        },
        methods: {
            //filter里面的
            loadData,
            handleQuery,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            gethouse() {
                let url = "/api/doorRecord/openModel";
                this.postRequest(url).then(res => {
                    console.log(res);
                    this.houseList = res.data.houseList;
                });
            }

        }
    };
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon-oneImg {
        font-size: 28px;
        color: #8c939d;
        /*width: 178px;*/
        /*height: 178px;*/
        width: 250px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar-oneImg {
        width: 250px;
        height: 120px;
        display: block;
    }

    .avatar-uploader-icon-twoImg {
        font-size: 28px;
        color: #8c939d;
        width: 316px;
        height: 160px;
        line-height: 160px;
        text-align: center;
    }

    avatar-twoImg {
        width: 108px;
        height: 30px;
        display: block;
    }

    .avatar-uploader-icon-threeImg {
        font-size: 28px;
        color: #8c939d;
        width: 90px;
        height: 90px;
        line-height: 90px;
        text-align: center;
    }

    avatar-threeImg {
        width: 90px;
        height: 90px;
        display: block;
    }


</style>
